<template>
    <div class="movie-list-component">
        <view class="list-container">
            <scroll-view id="contentScroll" class="scroll-view" :scroll-with-animation="true" :scroll-left="scrollLeft"
                :scroll-x="true" style="width: 100%;">
                <div class="movie-item seat"></div>
                <view :data-id="item.id" @click="selectMovie" :id="`movieItem${item.id}`" class="movie-item"
                    :class="{ active: modelValue == item.id }" v-for="( item, index ) in  list " :key="index">
                    <div class="img-container">
                        <image class="img" v-lazy="item?.image" alt="" />
                    </div>
                    <!-- <div class="point-container"></div> -->
                </view>
                <div class="movie-item seat1"></div>
            </scroll-view>
        </view>
    </div>
</template>
<script setup lang="ts">
import Taro from "@tarojs/taro";
import { onMounted, ref, reactive, toRefs, watch } from "vue";
const props = defineProps({
    // 子组件接收父组件传递过来的值
    list: {
        type: Array<any>,
        required: true,
    },
    modelValue: {
        type: [String, Number],
        required: true,
    },
});
//使用父组件传递过来的值
const { list, modelValue } = toRefs(props);
const emit = defineEmits(["onchangeMovie"]);

onMounted(() => {

    list?.value.map((item, index) => {
        if (item.id === modelValue?.value) {
            list?.value.unshift(list?.value.splice(index, 1)[0]);
        }
    });

});
const scrollLeft = ref(0);
//选择电影
const selectMovie = (e) => {
    let offsetLeft = e.currentTarget.offsetLeft;
    let { id } = e.currentTarget.dataset;
    if (!id) {
        id = list.value[0].id;
    }
    if (modelValue.value === id) {
        return;
    }
    emit("onchangeMovie", id);
    getRect(id, offsetLeft);
};
//计算电影item的偏移量
const getRect = async (id, offsetLeft) => {

    const eleId = `#movieItem${id}`;

    const contentScrollWidth: any = await getContentScrollWidth("#contentScroll");
    const query = Taro.createSelectorQuery();
    query.select(eleId).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(async (res) => {

        //获取item的宽度de 一半
        const subhalfwidth = res[0].width / 2;
        //需要scrollview 移动的距离是
        const juli = offsetLeft - contentScrollWidth / 2 + subhalfwidth;
        scrollLeft.value = juli;
    });
};
// 获取ScrollView的宽度
const getContentScrollWidth = (ele) => {
    return new Promise((resolve) => {
        const query = Taro.createSelectorQuery();
        query.select(ele).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec((res) => {
            const width = res[0].width;
            resolve(width);
        });
    });
};
</script>
<style lang="scss">
.movie-list-component {
    display: flex;
    flex-direction: column;

    .list-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 350px;

        .scroll-view {
            width: 100%;
            height: 320px;
            white-space: nowrap;
            position: relative;

            .movie-item {
                display: inline-block;
                position: relative;
                margin-left: 25px;
                // display: flex;
                // justify-content: center;
                // align-items: center;
                border-radius: 18px;
                // overflow: hidden;
                width: 146px;
                height: 218px;
                transition: width 0.8s;
                transition: height 0.8s;

                .img-container {
                    border-radius: 8px;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    position: relative;
                    z-index: 2;
                    // border: 5px #ffffff solid;

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .movie-item.active {
                // width: 180px !important;
                // height: 270px !important;
                transform: scale(1.1);
                transition: transform 0.8s ease;


                .img-container {
                    border-radius: 10px;
                    border: 3px #ffffff solid;
                }

                // .point-container {
                //     z-index: 1;
                //     height: 30px;
                //     width: 30px;
                //     background: #5232B7;
                //     // border-radius: 7px;
                //     position: absolute;
                //     bottom: -15px;
                //     left: 50%;
                //     margin-left: -15px;
                //     transform: rotate(45deg);
                // }
            }

            .seat {
                display: inline-block;
                width: 50%;
                height: 290px;
                margin-left: -100px;
            }

            .seat1 {
                display: inline-block;
                width: 36%;
                height: 290px;
                // margin-left: 50px;
            }
        }
    }
}
</style>
